<template>
  <el-dialog :title="title"
    :visible.sync="dialogFormVisible"
    :append-to-body = "body"
    top="250px"
    style="min-width:500px"
    :show-close="show"
    :on-remove="remove"
  >
    <el-form ref="dataForm" 
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
    >
        <el-form-item label="友链名称" prop="linkname">
            <el-input v-model="temp.linkname" />
        </el-form-item>
       <el-form-item label="友链链接" prop="linkhref">
            <el-input v-model="temp.linkhref" />
        </el-form-item>
        <div>
            <el-button @click="closeDialog">
                取消
            </el-button>
            <el-button type="primary" @click="title==='新建类型'?createData():updateData()">
                提交
            </el-button>
        </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
    name:'TypeDialog',
    props:{
        title:String,
        dialogFormVisible:Boolean,
        row:Object
    },
    watch:{
        row(){
            this.temp.linkname = this.row.linkname;
            this.temp.linkhref = this.row.linkhref;
        }
    },
    data(){
        const validateLinkname = (rule,value,callback) =>{
            if(!value){
                 callback(new Error('友链名称不允许为空'));
            }else{
                callback()
            }
        }
        const validateLinkhref = (rule,value,callback) =>{
            if(!value){
                 callback(new Error('链接不允许为空'));
            }else{
                callback()
            }
        }
        return{
            temp:{
                linkname:'',
                linkhref:''
            },
            rules:{
                linkname:[{validator:validateLinkname,trigger: 'blur'}],
                linkhref:[{validator:validateLinkhref,trigger: 'blur'}]
            },
            body:true,
            show:false
        }
    },
    methods:{
        createData(){
            this.$refs.dataForm.validate( valid => {
                if(valid){
                    let linkName = this.temp.linkname,
                        linkHref = this.temp.linkhref;
                    this.$emit('createData',{linkName,linkHref})
                     this.initData();                        
                } 
            })
           
        },
        updateData(){
            this.$refs.dataForm.validate( valid => {
                if(valid){
                    let linkName = this.temp.linkname,
                        linkHref = this.temp.linkhref;
                    this.$emit('updateData',{linkName,linkHref})
                    this.initData()   
                }
            })
        },
        initData(){
             this.temp.linkname = '';
             this.temp.linkhref = '';
        },
        closeDialog(){
             this.temp.linkname = '';
             this.temp.linkhref = '';
            this.$emit('closeDialog');
        }
    }
}
</script>

<style>

</style>